import { h, ref } from '../../lib/guide-coco-mini-vue.esm.js'

export const App = {
    name: "App",
    setup() {
        const props = ref({
            name: "张三",
            age: "18"
        });

        /**
         * props 更新 value 修改的情况
         */
        const onChangePropsDemo1 = () => {
            props.value.name = "李四" 
        };


        /**
         * props 更新后 value 为 null 或者 undefined 的情况
         */
        const onChangePropsDemo2 = () => {
            props.value.name = undefined
            props.value.age = null
        };

        /**
         * props 删除了key的情况
         */
        const onChangePropsDemo3 = () => {
            props.value = {
                address: "测试地址"
            }
        };


        return {
            props,
            onChangePropsDemo1,
            onChangePropsDemo2,
            onChangePropsDemo3
        }
    },
    render() {
        return h('div', { id: 'root', ...this.props },
            [
                h('button', { onClick: this.onChangePropsDemo1 }, '改变 props -name 为 李四'),
                h('button', { onClick: this.onChangePropsDemo2 }, '改变 props(name,age) 设置为 null，和 undefined '),
                h('button', { onClick: this.onChangePropsDemo3 }, '删除 poops(name,age) 新增 props(address)'),
            ])
    }
}
